<template>
  <el-tabs type="border-card" style="margin: 10px">
    <el-tab-pane label="文档预览">
      <el-row :gutter="20" style="margin-bottom: 5px" >
        <el-col :span="4">
          <el-button-group>
          <el-button :type="style[0]" @click="online()">在线文件</el-button>
          <el-button :type="style[1]" @click="native()">本地文件</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="10">
          <div v-show=isOnline>
            <el-input
                style="width: 400px;margin-right: 10px"
                v-model="docxUrl"
                placeholder="请输入文件路径">
            </el-input>
            <el-button type="primary" @click="confireFile()">预览</el-button>
          </div>
          <div v-show=!isOnline>
            <el-upload
                action="uploadFileUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <vue-office-docx
          :src="docx"
          style="height: 100vh;"
          @rendered="rendered"
      />
    </el-tab-pane>
    <el-tab-pane label="PDF预览">
      <el-row :gutter="20" style="margin-bottom: 5px" >
        <el-col :span="4">
          <el-button-group>
            <el-button :type="style[0]" @click="online()">在线文件</el-button>
            <el-button :type="style[1]" @click="native()">本地文件</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="10">
          <div v-show=isOnline>
            <el-input
                style="width: 400px;margin-right: 10px"
                v-model="docxUrl"
                placeholder="请输入文件路径">
            </el-input>
            <el-button type="primary" @click="confireFile()">预览</el-button>
          </div>
          <div v-show=!isOnline>
            <el-upload
                action="uploadFileUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <vue-office-pdf
          :src="pdf"
          @rendered="renderedHandler"
          @error="errorHandler"
      />
    </el-tab-pane>
    <el-tab-pane label="Excel预览">
      <el-row :gutter="20" style="margin-bottom: 5px" >
        <el-col :span="4">
          <el-button-group>
            <el-button :type="style[0]" @click="online()">在线文件</el-button>
            <el-button :type="style[1]" @click="native()">本地文件</el-button>
          </el-button-group>
        </el-col>
        <el-col :span="10">
          <div v-show=isOnline>
            <el-input
                style="width: 400px;margin-right: 10px"
                v-model="docxUrl"
                placeholder="请输入文件路径">
            </el-input>
            <el-button type="primary" @click="confireFile()">预览</el-button>
          </div>
          <div v-show=!isOnline>
            <el-upload
                action="uploadFileUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="1"
                :on-exceed="handleExceed">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>
      <vue-office-excel
          :src="excel"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
      />
    </el-tab-pane>
  </el-tabs>

</template>

<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import {ref,reactive} from "vue";

const { proxy } = getCurrentInstance();
const isOnline = ref(true)
const style = reactive(['primary',''])
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
const docx =ref('http://static.shanhuxueyuan.com/test6.docx')  //设置文档网络地址，可以是相对地址
const excel= ref('http://static.shanhuxueyuan.com/demo/excel.xlsx') //设置文档地址
const pdf=ref('http://static.shanhuxueyuan.com/test.pdf')  //设置文档地址
const docxUrl = ref('')
const fileType = reactive(["docx"])
const fileList =reactive([])

function rendered(){
  console.log("渲染完成")
}
function online(){
  isOnline.value = true
  style[0] = 'primary'
  style[1] = ''
}
function native(){
  isOnline.value = false
  style[0] = ''
  style[1] = 'primary'
}
function handleRemove(file, fileList) {
  console.log(file, fileList);
}
function handlePreview(file) {
  console.log(file);
}
function handleExceed(files, fileList) {
  proxy.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}
function beforeRemove(file, fileList) {
  return proxy.$confirm(`确定移除 ${ file.name }？`);
}

function renderedHandler() {
  console.log("渲染完成")
}
function errorHandler() {
  console.log("渲染失败")
}

</script>
<style scoped>

</style>
